<template>
  <ul class="list">
	  <li class="item"
	  	v-for="item in letters"
		  :key="item"
		  :ref="item"
		  @click="handleLetterClick"
		  @touchend="handleTouchEnd"
		  @touchmove="handleTouchMove"
		  @touchstart="handleTouchStart"
	  >{{item}}</li>
  </ul>
</template>

<script>
export default {
  name: 'CityAhplabet',
  props:{
	  cities: Object,
	  timer: null
  },
  computed: {
	  letters () {
		  const letters = []
		  for(let i in this.cities) {
			  letters.push(i)
		  }
		  return letters
		// ['a','b','c','d']
	  }
  },
  data () {
	  return {
		  touchStatus: false,
		  startY: 0,
	  }
  },
  updated() {
		//  获取字母表A到header的距离
	  	this.startY = this.$refs['A'][0].offsetTop
  },
  methods: {
	  handleLetterClick (e) {
		  this.$emit('change', e.target.innerText) 
	  },
	  handleTouchStart () {
		  this.touchStatus = true
	  },
	  handleTouchMove (e) {
		  if (this.touchStatus) {
			  if(this.timer) {
				  clearTimeout(this.timer)
			  }else{
				  let timer = setTimeout(() => {
					//  获取到手指到顶部距离
					const touchY = e.touches[0].clientY - 79
					const index = Math.floor ((touchY - this.startY) / 20)
					// console.log(index)
					if(index >= 0 && index < this.letters.length){
						this.$emit('change', this.letters[index])
					}
				  }, 16);
			  }
		  }
	  },
	  handleTouchEnd () {
		  this.touchStatus = false
	  }	
  }
}
</script>

<style lang="stylus" scoped>
    @import '~@/assets/styles/varibles.styl'  
	.list
	    display: flex
	    flex-direction: column
	    justify-content: center
	    position: absolute
	    top: 1.58rem
	    right: 0
	    bottom: 0
	    width: .4rem
	    .item
	      line-height: .4rem
	      text-align: center
	      color: $bgColor
</style>